<template>
    <div>
        <StElDynamicForm
                ref="form"
                :helper-form="{msgType: 'mpnews'}"
                :options="formItems"
                :submit-props="{useDefault: false}"
        ></StElDynamicForm>
    <MpMaterialNewsPreviewEdit
            :show-add-button="true"
            ref="newsPreviewEdit"
            thumb-media-id-place-holder="注意：临时素材的媒体id"
            :thumb-media-id-upload-url="thumbMediaIdUploadUrl()"
            thumb-media-id-tips="图片（image）: 10M，支持PNG\JPEG\JPG\GIF格式 "
            v-on:currentItemChange="currentItemChange">
        <el-button icon="el-icon-refresh" type="primary" class="st-width-100-pc st-margin-top-30-px" :loading="uploadToWxServerLoading"  @click="uploadToWxServer">上传到微信服务器</el-button>
        <template #formButtons>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('保存当前图文项')" :disabled="selectedItem.index ==null"
                       @click="saveCurrentNews" size="mini">保存当前图文项
            </el-button>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('删除当前图文项')" :disabled="selectedItem.index ==null"
                       @click="deleteCurrentNews" size="mini">删除当前图文项
            </el-button>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('重置')"
                       @click="()=>{$refs.newsPreviewEdit.getFormEdit().resetForm()}" size="mini">重置
            </el-button>
        </template>
    </MpMaterialNewsPreviewEdit>
        <MassDoSend :send-ignore-reprint="true" :form-data="formData"></MassDoSend>
    </div>
</template>

<script>
    import MpMaterialNewsPreviewEdit from '../../components/mp/MpMaterialNewsPreviewEdit.vue'
    import MassDoSend from './MassDoSend.vue'
    import MpUrl from '../MpUrl.js'
    export default {
        components:{
            MpMaterialNewsPreviewEdit,
            MassDoSend
        },
        props:{

        },

        computed:{

        },
        data(){
            return {
                uploadToWxServerLoading: false,
                selectedItem:{
                    index: null,
                    item: null
                },
                // 上传后保存的上传响应结果
                uploadResult: null,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                ],

            }
        },
        mounted() {

        },
        methods:{
            thumbMediaIdUploadUrl(){
                let type = 'image'
                if(!this.$refs.form){
                    return null
                }
                let appCode = this.$refs.form.getFormData().appCode
                if (!appCode) {
                    return null
                }

                return this.$stStringTools.replaceb(MpUrl.TemporaryMaterialAdd,{appCode: appCode,type: type})
            },
            formData(){
                let r = false
                this.$refs.form.getFormRef().validate((valid)=>{
                    if(valid){
                        r = true
                    }
                })
                if(r == false){
                    this.$message.error('请选择公众号')
                    return false
                }
                if(!this.uploadResult){
                    this.$message.error('请先上传到微信服务器以获取素材id')
                    return false
                }
                let form = this.$refs.form.getFormData()

                form.mediaId = this.uploadResult.mediaId
                return form
            },
            currentItemChange(val){
                this.selectedItem = val
            },
            getNewsItem(){
                return this.$refs.newsPreviewEdit.getNewsItem()
            },
            saveCurrentNews() {
                this.$refs.newsPreviewEdit.saveCurrentNews()
            },
            deleteCurrentNews(){
                this.$refs.newsPreviewEdit.deleteCurrentNews()
            },
            // 上传到微信服务器
            uploadToWxServer(){
                if(!this.getNewsItem() || this.getNewsItem().length == 0){
                    this.$message.error('请先添加图文项并进行编辑')
                    return
                }
                let appCode = this.$refs.form.getFormData().appCode
                if(!this.$refs.form.getFormData().appCode){
                    this.$message.error('请选择公众号')
                    return
                }

                let param = {
                    articles: this.getNewsItem()
                }
                this.uploadToWxServerLoading = true
                this.axios.post( this.$stStringTools.replaceb(MpUrl.MassHairNewsAdd,{appCode: appCode}),param)
                    .then(res=>{

                        this.uploadResult = res.data
                        this.$message.success('上传成功，现在可以群发消息了')
                    }).catch(error=>{
                    if(error.response){
                        if (error.response.data && error.response.data.errorMsg) {
                            if(error.response.status != 401){
                                this.$message.error(error.response.data.errorMsg + ' 请确认所有图文项都已保存')
                            }else{
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.uploadToWxServerLoading = false
                })
            },
        },
        watch:{
        }
    }
</script>

<style scoped>

</style>